<template>
  <div class="user-center-container">
    <Header />

    <!-- 提示信息 -->
    <div v-if="message" class="message-toast" :class="messageType">
      {{ message }}
    </div>

    <section class="user-center">
      <!-- 侧边栏 -->
      <aside class="sidebar">
        <div class="sidebar-header">
          <img
              :src="user.avatar || 'https://static.zibovip.top/imgs/2025/03/7139cadfe5ccf3b6.png'"
              class="sidebar-avatar"
              alt="avatar"
          />
          <h3 class="sidebar-name">{{ user.nickname || user.name || '未设置' }}</h3>
        </div>
        <nav class="sidebar-nav">
          <a href="#" class="nav-item" @click.prevent="activeTab = 'profile'" :class="{ active: activeTab === 'profile' }">个人信息</a>
          <a href="#" class="nav-item" @click.prevent="activeTab = 'address'" :class="{ active: activeTab === 'address' }">收货地址</a>
          <a href="#" class="nav-item" @click.prevent="activeTab = 'orders'" :class="{ active: activeTab === 'orders' }">我的订单</a>
          <a href="#" class="nav-item" @click.prevent="activeTab = 'settings'" :class="{ active: activeTab === 'settings' }">账户设置</a>
          <a href="#" class="nav-item" @click.prevent="logout">退出登录</a>
        </nav>
      </aside>

      <!-- 主内容区域 -->
      <div class="main-content">
<!--        <h2 class="title">用户中心</h2>-->
        <div v-if="!isLoggedIn" class="login-prompt">
          请先<a href="/login" class="login-link">登录</a>
        </div>
        <div v-else class="content">
          <!-- 个人信息模块 -->
          <div v-show="activeTab === 'profile'" class="card user-info">
            <div class="card-header">
              <h3>个人信息</h3>
            </div>
            <div class="card-body">
              <div class="avatar-container">
                <img
                    :src="user.avatar || 'https://static.zibovip.top/imgs/2025/03/7139cadfe5ccf3b6.png'"
                    class="avatar"
                    alt="avatar"
                />
              </div>
              <div class="info-details">
                <p>昵称：{{ user.nickname || user.name || '未设置' }}</p>
                <p>账号：{{ user.username || '未设置' }}</p>
                <p>手机号：{{ user.phone || '未绑定' }}</p>
                <p>邮箱：{{ user.email || '未绑定' }}</p>
              </div>
            </div>
          </div>

          <!-- 收货地址模块 -->
          <div v-show="activeTab === 'address'" class="card address-info">
            <div class="card-header">
              <h3>收货地址</h3>
              <button class="add-address-btn" @click="showAddressForm = true">添加地址</button>
            </div>
            <div class="card-body">
              <!-- 地址列表 -->
              <div v-if="addresses.length > 0" class="address-list">
                <div v-for="address in addresses" :key="address.id" class="address-item">
                  <div class="address-content">
                    <div class="address-header">
                      <span class="address-name">{{ address.name }}</span>
                      <span class="address-phone">{{ address.phone }}</span>
                      <span v-if="address.isDefault" class="default-tag">默认</span>
                    </div>
                    <div class="address-detail">
                      <span class="address-area">{{ address.area }}</span>
                      <span class="address-other">{{ address.otherName }}</span>
                    </div>
                  </div>
                  <div class="address-actions">
                    <button class="action-btn edit-btn" @click="editAddress(address)">编辑</button>
                    <button v-if="!address.isDefault" class="action-btn default-btn" @click="setDefaultAddress(address.id)">设为默认</button>
                    <button class="action-btn delete-btn" @click="deleteAddressItem(address.id)">删除</button>
                  </div>
                </div>
              </div>
              <div v-else class="no-address">
                <p>暂无收货地址</p>
                <button class="add-address-btn" @click="showAddressForm = true">添加第一个地址</button>
              </div>
            </div>
          </div>

          <!-- 订单管理模块 -->
          <div v-show="activeTab === 'orders'" class="card order-info">
            <div class="card-header">
              <h3>我的订单</h3>
            </div>
            <div class="card-body">
              <div class="order-statistics">
                <span>消费总金额：<b style="color:#e00b0b">￥{{ orderStatistics.consumption }}</b></span>
                <span style="margin-left:24px">订单总数：<b>{{ orderStatistics.count }}</b></span>
              </div>
              <ul v-if="pagedOrders.length" class="order-list jd-order-list">
                <li v-for="order in pagedOrders" :key="order.orderId" class="jd-order-card">
                  <div class="jd-order-header">
                    <div class="jd-order-meta">
                      <span>下单时间：{{ order.createTime.replace('T',' ') }}</span>
                      <span style="margin-left:24px">订单号：{{ order.orderNumber }}</span>
                    </div>
                    <div class="jd-order-status">
                      <span>{{ order.orderStatus === 0 ? '待支付' : order.orderStatus === 1 ? '已支付' : '未知' }}</span>
                    </div>
                  </div>
                  <div class="jd-order-body">
                    <div class="jd-order-products">
                      <div v-for="item in order.orderProductItemVo" :key="item.name" class="jd-order-product">
                        <img :src="item.img" alt="商品图片" class="jd-order-product-img">
                        <div class="jd-order-product-info">
                          <div class="jd-order-product-name">{{ item.name }}</div>
                          <div class="jd-order-product-meta">单价：￥{{ item.price }} &nbsp; 数量：{{ item.number }}</div>
                        </div>
                      </div>
                    </div>
                    <div class="jd-order-summary">
                      <div class="jd-order-amount">总金额：<span style="color:#e00b0b;font-weight:bold">￥{{ order.amount }}</span></div>
                      <div class="jd-order-actions">
                        <button v-if="order.orderStatus === 0" class="jd-btn-pay" @click="openPayModal(order)">去支付</button>
                        <button class="jd-btn-detail" @click="openOrderModal(order)">订单详情</button>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
              <div v-if="orders.length > pageSize" class="pagination" style="margin: 16px 0; text-align: center;">
                <button :disabled="currentPage === 1" @click="currentPage--">上一页</button>
                <span style="margin: 0 12px;">第 {{ currentPage }} 页 / 共 {{ Math.ceil(orders.length / pageSize) }} 页</span>
                <button :disabled="currentPage === Math.ceil(orders.length / pageSize)" @click="currentPage++">下一页</button>
              </div>
              <div v-if="totalOrders > 0" style="text-align:center;color:#888;font-size:14px;">共 {{ totalOrders }} 条订单</div>
              <p v-else-if="orderError" class="error-message">获取订单数据失败，请稍后重试</p>
              <p v-else class="no-data">暂无订单</p>
              <button class="manage-btn">订单管理</button>
            </div>
          </div>

          <!-- 账户设置模块（占位） -->
          <div v-show="activeTab === 'settings'" class="card settings-info">
            <div class="card-header">
              <h3>账户设置</h3>
            </div>
            <div class="card-body">
              <p>（此处可添加账户设置内容）</p>
              <button class="manage-btn">保存设置</button>
            </div>
          </div>

          <!-- 默认用户中心模块 -->
          <Dashboard
            v-show="activeTab === 'user-center'"
            :order-count="orders.length"
            :total-spending="totalSpending"
            :coupon-count="couponCount"
            :favorite-count="favoriteCount"
            :orders="orders"
            :consumption="orderStatistics.consumption"
            :count="orderStatistics.count"
          />
          <div v-if="activeTab === 'user-center' && couponList.length" class="coupon-list-panel">
            <h4 style="color:#333;margin:18px 0 8px 0;">我的优惠券</h4>
            <ul>
              <li v-for="coupon in couponList" :key="coupon.bagId" style="margin-bottom:8px;">
                <b>{{ coupon.name }}</b>：面额{{ coupon.value }}元，满{{ coupon.userLimitValue }}元可用，有效期至{{ coupon.expireTime.replace('T',' ') }}
                <span v-if="coupon.expire" style="color:red;">（已过期）</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- 地址表单弹窗 -->
    <div v-if="showAddressForm" class="modal-overlay" @click="closeAddressForm">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ isEditing ? '编辑地址' : '添加地址' }}</h3>
          <button class="close-btn" @click="closeAddressForm">&times;</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="saveAddress" class="address-form">
            <div class="form-group">
              <label for="name">收货人姓名</label>
              <input
                id="name"
                v-model="addressForm.name"
                type="text"
                required
                placeholder="请输入收货人姓名"
              />
            </div>
            <div class="form-group">
              <label for="phone">手机号码</label>
              <input
                id="phone"
                v-model="addressForm.phone"
                type="tel"
                required
                placeholder="请输入手机号码"
              />
            </div>
            <div class="form-group">
              <label for="area">详细地址</label>
              <textarea
                id="area"
                v-model="addressForm.area"
                required
                placeholder="请输入详细地址"
                rows="3"
              ></textarea>
            </div>
            <div class="form-group">
              <label for="otherName">地址标签</label>
              <input
                id="otherName"
                v-model="addressForm.otherName"
                type="text"
                placeholder="如：家、公司、学校"
              />
            </div>
            <div class="form-group checkbox-group">
              <label class="checkbox-label">
                <input
                  type="checkbox"
                  v-model="addressForm.isDefault"
                  :true-value="1"
                  :false-value="0"
                />
                设为默认地址
              </label>
            </div>
            <div class="form-actions">
              <button type="button" class="cancel-btn" @click="closeAddressForm">取消</button>
              <button type="submit" class="save-btn">{{ isEditing ? '更新' : '保存' }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 订单详情弹窗 -->
    <div v-if="showOrderModal" class="modal-overlay" @click="closeOrderModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>订单详情</h3>
          <button class="close-btn" @click="closeOrderModal">&times;</button>
        </div>
        <div class="modal-body">
          <div v-if="selectedOrder">
            <p><b>订单号：</b>{{ selectedOrder.orderNumber }}</p>
            <p><b>下单时间：</b>{{ selectedOrder.createTime.replace('T',' ') }}</p>
            <p><b>总金额：</b>￥{{ selectedOrder.amount }}</p>
            <p><b>状态：</b>{{ selectedOrder.orderStatus === 0 ? '待支付' : selectedOrder.orderStatus === 1 ? '已支付' : '未知' }}</p>
            <div style="margin:12px 0 6px 0;"><b>商品明细：</b></div>
            <ul style="padding-left:0;">
              <li v-for="item in selectedOrder.orderProductItemVo" :key="item.name" style="display:flex;align-items:center;margin-bottom:8px;">
                <img :src="item.img" alt="商品图片" style="width:48px;height:48px;object-fit:cover;margin-right:12px;border-radius:6px;border:1px solid #e3eaf5;background:#fff;">
                <div>
                  <div style="font-weight:500;">{{ item.name }}</div>
                  <div style="font-size:13px;color:#888;">单价：￥{{ item.price }} &nbsp; 数量：{{ item.number }}</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 支付弹窗 -->
    <div v-if="showPayModal" class="modal-overlay" @click="closePayModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>选择收货地址</h3>
          <button class="close-btn" @click="closePayModal">&times;</button>
        </div>
        <div class="modal-body">
          <div v-if="addresses.length === 0" style="text-align:center;color:#888;">暂无可用地址，请先添加地址</div>
          <ul v-else class="pay-address-list">
            <li v-for="address in addresses" :key="address.id" class="pay-address-item" :class="{selected: payAddressId === address.id}" @click="payAddressId = address.id">
              <div>
                <b>{{ address.name }}</b> {{ address.phone }}<span v-if="address.isDefault" style="color:#2563eb;font-size:12px;margin-left:8px;">[默认]</span><br>
                <span style="font-size:13px;color:#888;">{{ address.area }} {{ address.otherName }}</span>
              </div>
            </li>
          </ul>
          <div style="margin-top:18px;text-align:right;">
            <button class="save-btn" :disabled="!payAddressId" @click="payOrder">确认支付</button>
          </div>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import Dashboard from '@/components/Dashboard.vue'
import { getQuan,getUserInfo } from '@/api/user'
import { getMyOrders, payOrder as apiPayOrder } from '@/api/order'
import {
  createAddress,
  getAddressPage,
  updateAddress,
  deleteAddress,
  type AddressData,
  type AddressResponse
} from '@/api/address'
import { useUserStore } from '@/store/user'
import { getOrderStatistics } from '@/api/order'

const user = ref<any>({})
const orders = ref<any[]>([])
const orderError = ref(false)
const addresses = ref<AddressResponse[]>([])
const showAddressForm = ref(false)
const isEditing = ref(false)
const editingAddressId = ref<number | null>(null)
const message = ref('') // 提示信息
const messageType = ref<'success' | 'error'>('success') // 提示类型
const couponCount = ref(0)
const favoriteCount = ref(28) // 假数据
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const activeTab = ref('user-center') // 默认显示用户中心模块
const orderStatistics = ref({ consumption: 0, count: 0, couponCount: 0 })
const couponList = ref([])
const currentPage = ref(1)
const pageSize = 4
const totalOrders = ref(0)
const pagedOrders = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  return orders.value.slice(start, start + pageSize)
})
const showOrderModal = ref(false)
const selectedOrder = ref<any>(null)
const showPayModal = ref(false)
const payOrderId = ref<number|null>(null)
const payAddressId = ref<number|null>(null)
let payOrderObj: any = null

const totalSpending = computed(() => {
  if (!orders.value || orders.value.length === 0) return 0
  return orders.value.reduce((sum, order) => sum + (order.amount || 0), 0)
})

// 根据路由路径设置默认标签页
if (route.path === '/address') {
  activeTab.value = 'address'
}

// 地址表单数据
const addressForm = ref<AddressData>({
  name: '',
  area: '',
  phone: '',
  otherName: '',
  isDefault: 0
})

// 判断用户是否已登录
const isLoggedIn = computed(() => !!userStore.token)

// 监听标签页切换，当切换到地址标签时加载地址数据
watch(activeTab, (newTab) => {
  console.log('标签页切换到:', newTab)
  if (newTab === 'address' && isLoggedIn.value) {
    console.log('用户已登录，开始加载地址数据')
    loadAddresses()
  } else if (newTab === 'address' && !isLoggedIn.value) {
    console.log('用户未登录，无法加载地址数据')
  }
})

const logout = () => {
  userStore.clear()
  router.push('/login')
}

// 加载地址列表
const loadAddresses = async () => {
  console.log('开始加载地址列表...')
  try {
    const response = await getAddressPage({ page: 1, size: 10 })
    console.log('地址列表响应:', response)
    // 适配后端返回的数据结构
    if (response.code === 200 && response.data) {
      addresses.value = response.data.records || []
      console.log('设置地址列表:', addresses.value)
    } else {
      console.error('地址数据格式错误:', response)
      addresses.value = []
    }
  } catch (error) {
    console.error('加载地址失败:', error)
    addresses.value = []
  }
}

// 添加地址
const addAddress = () => {
  isEditing.value = false
  editingAddressId.value = null
  addressForm.value = {
    name: '',
    area: '',
    phone: '',
    otherName: '',
    isDefault: 0
  }
  showAddressForm.value = true
}

// 编辑地址
const editAddress = (address: AddressResponse) => {
  isEditing.value = true
  editingAddressId.value = address.id
  addressForm.value = {
    name: address.name,
    area: address.area,
    phone: address.phone,
    otherName: address.otherName,
    isDefault: address.isDefault
  }
  showAddressForm.value = true
}

// 保存地址
const saveAddress = async () => {
  try {
    if (isEditing.value && editingAddressId.value) {
      const response = await updateAddress(editingAddressId.value, addressForm.value)
      if (response.code === 200) {
        console.log('地址更新成功')
        await loadAddresses()
        closeAddressForm()
        showMessage('地址更新成功')
      } else {
        console.error('地址更新失败:', response.message)
        showMessage('地址更新失败', 'error')
      }
    } else {
      const response = await createAddress(addressForm.value)
      if (response.code === 200) {
        console.log('地址创建成功')
        await loadAddresses()
        closeAddressForm()
        showMessage('地址创建成功')
      } else {
        console.error('地址创建失败:', response.message)
        showMessage('地址创建失败', 'error')
      }
    }
  } catch (error) {
    console.error('保存地址失败:', error)
    showMessage('保存地址失败', 'error')
  }
}

// 删除地址
const deleteAddressItem = async (id: number) => {
  if (confirm('确定要删除这个地址吗？')) {
    try {
      const response = await deleteAddress(id)
      if (response.code === 200) {
        console.log('地址删除成功')
        await loadAddresses()
        showMessage('地址删除成功')
      } else {
        console.error('地址删除失败:', response.message)
        showMessage('地址删除失败', 'error')
      }
    } catch (error) {
      console.error('删除地址失败:', error)
      showMessage('删除地址失败', 'error')
    }
  }
}

// 设置默认地址
const setDefaultAddress = async (id: number) => {
  try {
    const address = addresses.value.find((addr: AddressResponse) => addr.id === id)
    if (address) {
      const response = await updateAddress(id, {
        ...address,
        isDefault: 1
      })
      if (response.code === 200) {
        console.log('设置默认地址成功')
        await loadAddresses()
        showMessage('设置默认地址成功')
      } else {
        console.error('设置默认地址失败:', response.message)
        showMessage('设置默认地址失败', 'error')
      }
    }
  } catch (error) {
    console.error('设置默认地址失败:', error)
    showMessage('设置默认地址失败', 'error')
  }
}

// 关闭地址表单
const closeAddressForm = () => {
  showAddressForm.value = false
  isEditing.value = false
  editingAddressId.value = null
}

// 显示提示信息
const showMessage = (msg: string, type: 'success' | 'error' = 'success') => {
  message.value = msg
  messageType.value = type
  setTimeout(() => {
    message.value = ''
  }, 3000)
}

function openOrderModal(order: any) {
  selectedOrder.value = order
  showOrderModal.value = true
}

function closeOrderModal() {
  showOrderModal.value = false
  selectedOrder.value = null
}

function openPayModal(order: any) {
  payOrderId.value = order.orderId
  payOrderObj = order
  payAddressId.value = addresses.value.find(a => a.isDefault)?.id || (addresses.value[0]?.id || null)
  showPayModal.value = true
}

function closePayModal() {
  showPayModal.value = false
  payOrderId.value = null
  payAddressId.value = null
  payOrderObj = null
}

async function payOrder() {
  if (!payOrderId.value || !payAddressId.value) return
  try {
    const data = await apiPayOrder(payOrderId.value, payAddressId.value)
    if (data.code === 200) {
      showMessage('支付成功！')
      closePayModal()
      // 刷新订单
      const myOrdersRes = await getMyOrders()
      if (myOrdersRes && (myOrdersRes.code === 200 || myOrdersRes.success)) {
        orders.value = myOrdersRes.data || []
        totalOrders.value = myOrdersRes.total || orders.value.length
      }
    } else {
      showMessage(data.message || '支付失败', 'error')
    }
  } catch (e) {
    showMessage('支付请求失败', 'error')
  }
}

onMounted(async () => {
  loadAddresses()
  console.log('onMounted 执行')
  userStore.initFromStorage()
  console.log('userStore.token:', userStore.token)
  if (!userStore.token) {
    console.warn('未检测到 token，跳转登录页')
    router.push('/login')
    return
  }
  user.value = userStore.user || {}
  try {
    console.log('准备请求 getMyOrders')
    const myOrdersRes = await getMyOrders()
    console.log('getMyOrders 返回：', myOrdersRes)
    if (myOrdersRes && (myOrdersRes.code === 200 || myOrdersRes.success)) {
      orders.value = myOrdersRes.data || []
      totalOrders.value = myOrdersRes.total || orders.value.length
    } else {
      orders.value = []
      totalOrders.value = 0
      orderError.value = true
    }
    // 新增：获取订单统计信息
    const statRes = await getOrderStatistics()
    if (statRes.code === 200 && statRes.data) {
      orderStatistics.value = statRes.data
    }
    // 新增：获取用户信息
    const userInfoRes = await getUserInfo()
    if (userInfoRes.code === 200 && userInfoRes.data) {
      user.value = userInfoRes.data
    } else {
      user.value = userStore.user || {}
    }
    // 获取优惠券总数和明细
    const quanRes = await getQuan({ pageNum: 1, pageSize: 100 })
    if (quanRes && (quanRes.total !== undefined || (quanRes.data && quanRes.data.total !== undefined))) {
      couponCount.value = quanRes.total ?? (quanRes.data ? quanRes.data.total : 0)
      couponList.value = quanRes.quanVOs || (quanRes.data ? quanRes.data.quanVOs : []) || []
    }
    // 如果当前是地址标签页，加载地址数据
    if (activeTab.value === 'address') {
      await loadAddresses()
    }
  } catch (err) {
    console.error('请求订单接口异常', err)
  }
})
</script>

<style scoped>
.user-center-container {
  background: linear-gradient(135deg, #e0f7fa, #f0f4f8);
  min-height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}

.user-center {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
  display: flex;
  gap: 30px;
}

.sidebar {
  width: 250px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: transform 0.3s ease;
}

.sidebar-header {
  text-align: center;
  margin-bottom: 20px;
}

.sidebar-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e0e7ff;
  transition: transform 0.3s ease;
}

.sidebar:hover .sidebar-avatar {
  transform: scale(1.1);
}

.sidebar-name {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 10px 0;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nav-item {
  padding: 10px 15px;
  color: #64748b;
  text-decoration: none;
  font-size: 15px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.nav-item.active {
  background: #4f46e5;
  color: #ffffff;
}

.nav-item:hover {
  background: #e0e7ff;
  color: #1e293b;
  transform: translateX(5px);
}

.main-content {
  width: 100%;
  max-width: 1400px;
  padding: 0 24px;
  box-sizing: border-box;
}

.title {
  font-size: 32px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: fadeInDown 1s ease-out;
}

.login-prompt {
  text-align: center;
  color: #64748b;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.login-link {
  color: #4f46e5;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.login-link:hover {
  color: #4338ca;
  text-decoration: underline;
}

.content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  width: 100%;
}

.card {
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  transform: translateY(0);
}

.card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.card-header {
  background: linear-gradient(90deg, #f1f5f9, #e0e7ff);
  padding: 15px 20px;
  border-bottom: 1px solid #e2e8f0;
  transition: background 0.3s ease;
}

.card:hover .card-header {
  background: linear-gradient(90deg, #e0e7ff, #c7d2fe);
}

.card-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  text-transform: uppercase;
}

.card-body {
  width: 100%;
  padding: 25px;
  color: #64748b;
  font-size: 16px;
  transition: padding 0.3s ease;
}

.avatar-container {
  text-align: center;
  margin-bottom: 25px;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #e0e7ff;
  transition: transform 0.3s ease;
}

.card:hover .avatar {
  transform: scale(1.1);
}

.info-details p {
  margin: 10px 0;
  font-weight: 500;
}

.order-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.order-item {
  padding: 12px;
  border-bottom: 1px solid #e2e8f0;
  transition: background 0.3s ease;
}

.order-item:hover {
  background: #f1f5f9;
}

.order-item:last-child {
  border-bottom: none;
}

.no-data {
  color: #94a3b8;
  text-align: center;
  margin-bottom: 20px;
  font-style: italic;
}

.error-message {
  color: #dc2626;
  text-align: center;
  margin-bottom: 20px;
  font-weight: 500;
}

.card.order-info {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(120,160,255,0.06);
  border: 1px solid #e3eaf5;
  background: #fff;
}

.manage-btn {
  display: block;
  width: 60%;
  padding: 12px;
  background: linear-gradient(90deg, #4f46e5, #6b46c1);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}

.manage-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(79, 70, 229, 0.5);
  background: linear-gradient(90deg, #4338ca, #5b21b6);
}

/* 动画效果 */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* 地址管理样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.add-address-btn {
  padding: 8px 16px;
  background: linear-gradient(90deg, #10b981, #059669);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-address-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.address-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.address-item {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 15px;
  background: #f8fafc;
  transition: all 0.3s ease;
}

.address-item:hover {
  border-color: #4f46e5;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
}

.address-content {
  margin-bottom: 10px;
}

.address-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.address-name {
  font-weight: 600;
  color: #1e293b;
  font-size: 16px;
}

.address-phone {
  color: #64748b;
  font-size: 14px;
}

.default-tag {
  background: #4f46e5;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.address-detail {
  display: flex;
  align-items: center;
  gap: 10px;
}

.address-area {
  color: #374151;
  font-size: 14px;
}

.address-other {
  background: #e0e7ff;
  color: #4f46e5;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.address-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.edit-btn {
  background: #3b82f6;
  color: #ffffff;
}

.edit-btn:hover {
  background: #2563eb;
}

.default-btn {
  background: #10b981;
  color: #ffffff;
}

.default-btn:hover {
  background: #059669;
}

.delete-btn {
  background: #ef4444;
  color: #ffffff;
}

.delete-btn:hover {
  background: #dc2626;
}

.no-address {
  text-align: center;
  padding: 40px 20px;
  color: #64748b;
}

.no-address p {
  margin-bottom: 20px;
  font-size: 16px;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  animation: slideIn 0.3s ease;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 12px 12px 0 0;
}

.modal-header h3 {
  margin: 0;
  color: #1e293b;
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.modal-body {
  padding: 25px;
}

.address-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 500;
  color: #374151;
  font-size: 14px;
}

.form-group input,
.form-group textarea {
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.checkbox-group {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 10px;
}

.cancel-btn {
  padding: 10px 20px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  background: #e2e8f0;
  color: #374151;
}

.save-btn {
  padding: 10px 20px;
  background: linear-gradient(90deg, #4f46e5, #6b46c1);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 提示信息样式 */
.message-toast {
  position: fixed;
  top: 80px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  z-index: 1001;
  animation: slideInToast 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.message-toast.success {
  background: linear-gradient(90deg, #10b981, #059669);
}

.message-toast.error {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

@keyframes slideInToast {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.order-statistics {
  margin-bottom: 16px;
  font-size: 16px;
  color: #1e293b;
}

.coupon-list-panel {
  background: #fff;
  border-radius: 10px;
  margin: 18px 0 0 0;
  padding: 18px 24px 10px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.coupon-list-panel ul {
  padding-left: 18px;
  margin: 0;
}
.coupon-list-panel li {
  color: #444;
  font-size: 15px;
}

.jd-order-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0;
  margin: 0;
  width: 100%;
}
.jd-order-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(120,160,255,0.06);
  border: 1px solid #e3eaf5;
  padding: 0 0 6px 0;
  list-style: none;
  transition: box-shadow 0.18s;
  overflow: hidden;
}
.jd-order-card:hover {
  box-shadow: 0 4px 16px 0 rgba(120,160,255,0.13);
}
.jd-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f7fafd;
  border-bottom: 1px solid #e3eaf5;
  padding: 8px 18px;
  font-size: 14px;
  color: #444;
}
.jd-order-meta span {
  margin-right: 12px;
}
.jd-order-status {
  color: #2563eb;
  font-weight: 500;
}
.jd-order-body {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 10px 18px 0 18px;
}
.jd-order-products {
  display: flex;
  flex: 1;
  gap: 18px;
  align-items: stretch;
}
.jd-order-product {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border-radius: 8px;
  padding: 4px 8px;
  min-width: 140px;
  max-width: 180px;
  box-sizing: border-box;
  border: 1px solid #e3eaf5;
}
.jd-order-product-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 10px;
  background: #fff;
  border: 1px solid #e3eaf5;
}
.jd-order-product-info {
  flex: 1;
}
.jd-order-product-name {
  font-size: 15px;
  font-weight: 500;
  color: #222;
  margin-bottom: 4px;
}
.jd-order-product-meta {
  font-size: 13px;
  color: #888;
}
.jd-order-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 160px;
  padding-left: 24px;
}
.jd-order-amount {
  font-size: 15px;
  margin-bottom: 8px;
}
.jd-order-actions {
  display: flex;
  gap: 10px;
}
.jd-btn-pay {
  background: linear-gradient(90deg, #ff4d4f, #ff7a45);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 18px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}
.jd-btn-pay:hover {
  background: linear-gradient(90deg, #ff7a45, #ff4d4f);
}
.jd-btn-detail {
  background: #f1f5f9;
  color: #2563eb;
  border: 1px solid #e3eaf5;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}
.jd-btn-detail:hover {
  background: #e3edfa;
}
.pay-address-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.pay-address-item {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
  background: #f8fafc;
  cursor: pointer;
  transition: border 0.2s, box-shadow 0.2s;
}
.pay-address-item.selected {
  border: 2px solid #2563eb;
  background: #e0e7ff;
  box-shadow: 0 2px 8px #e0e7ff44;
}
</style>
